<template>
  <div class="reg">
    <h1>注册</h1>
    <ul>
      <li>
        <div>
          <input type="file" style="display:none" ref="file" @change="fileSelected" />
          <img :src="imgUrl" alt @click="changeImg" />
        </div>
      </li>
      <li>
        <input type="text" v-model="nickName" placeholder="请输入昵称" />
      </li>
      <li>
        <input type="text" v-model="userName" placeholder="请输入用户名" />
      </li>
      <li>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </li>
      <li>
        <input type="password" v-model="rePassword" placeholder="请再次输入密码" />
      </li>
      <li>
        <button @click="regHandle">注册</button>
      </li>
      <li>
        <router-link :to="{name:'Login'}" class="reg-link">已有帐号，我要登陆</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 导出默认的
import request from '../utils/request'
import { serverUrl } from '../utils/config'
import { reg } from '../services/user'
import { setToken } from '../utils/auth'

export default {
  data() {
    return {
      avatar: '',
      nickName: '',
      userName: '',
      password: '',
      rePassword: '',
      imgUrl: require('../assets/images/up.jpg')
    }
  },
  methods: {
    changeImg() {
      this.$refs.file.click()
    },
    async fileSelected(e) {
      console.log(e)
      const formData = new FormData()
      formData.append('file', e.currentTarget.files[0])
      const res = await request.post('/api/v1/common/file_upload', formData, {
        headers: {
          'Coontent-Type': 'multipart/form-data'
        }
      })
      // console.log(res)
      this.avatar = res.info
      this.imgUrl = serverUrl + res.info
    },
    async regHandle() {
      if (
        this.avatar === '' &&
        this.nickName === '' &&
        this.userName === '' &&
        this.password === ''
      ) {
        alert('请您将信息填写完整')
        return
      }
      if (this.password !== this.rePassword) {
        alert('两次输入的密码不一致')
        return
      }
      const res = await reg({
        avatar: this.avatar,
        nickName: this.nickName,
        userName: this.userName,
        password: this.password
      })
      // console.log(res)
      if (res.code === 'success') {
        alert('恭喜您注册成功')
        setToken(res.token)
        this.$router.push({ name: 'Login' })
      } else {
        alert(res.message)
      }
    }
  }
}
</script>

<style scoped>
.reg {
  /* text-align: center; */
  /* margin: 0.3rem auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  height: 100%;
}
ul li {
  width: 100%;
  height: auto;
}
ul li:first-child {
  margin: 15px 0;
  height: 100px;
}
ul li:first-child div {
  width: 100px;
  max-height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
ul li:first-child div input {
  width: 100%;
  height: 100%;
}
ul li:first-child div img {
  max-height: 100px;
}
li input {
  width: 2rem;
  height: 0.3rem;
  font-size: 0.14rem;

  border: none;
  border-bottom: 0.01rem solid rgb(156, 155, 155);
}
li button {
  width: 1rem;
  height: 0.3rem;
  background: blueviolet;
  color: white;
  line-height: 0.3rem;
  border-radius: 0.06rem;
  border: none;
  font-size: 0.14rem;
  margin: 0.05rem 0;
}
.reg-link {
  float: right;
  font-size: 0.1rem;
  width: 100%;
  display: block;
}
</style>
